<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.logo{margin-left: 150px;margin-top: 30px;}
		#box{width: 988px;border:1px solid #fdfdfd;box-shadow: 0px 5px 5px 5px #888;
			margin: 20px auto;overflow: hidden;padding: 20px;}
		#box form{float: left;}
		
		#box  h1 a{font:12px/46px "";color: #0083CE;}
		#box  h1.hy{display: inline-block;margin-right:30px ;font:16px/46px "";}
		#box  h1.er{display: inline-block;font:12px/46px ""}
		#box form input{display: block;}
		#user ,#pass{width: 338px; height: 38px; border: 1px solid #0083CE;margin-bottom: 30px;}
		#btn{width: 326px;height: 36px;border: none; border-bottom: 1px solid #0083CE;background: #0099f1;}
		#box img{float: right;}
	</style>
	<body>
		<img src="images/logo_02.png" class="logo"/>
		<div id="box">
		 <form >
		 	<h1 class="hy">Hi!欢迎登录</h1>
		 	<h1 class="er">尚未注册账号<a href="r.html">去注册</a></h1>
	   <input type="text" id="user" placeholder="请输入用户名">
	    <input type="text" id="pass" placeholder="请输入密码">
	    <input type="button" value="登录" id="btn">
   		 <span id="msg"></span>
   		 </form>
   		 <img src="images/log.png"/>
    </div>
	</body>
	<script type="text/javascript" src="libs/jquery.js"></script>
	<script type="text/javascript" src="libs/jquery.cookie.js">	</script>
	<script type="text/javascript">
		class Login{
			constructor(){
				this.url = "api/login";
				this.init();
			}
			init(){
				var that = this;
				$("#btn").click(function(){
					that.load()
				})
			}
			load(){
				console.log(this.url);
				var that = this;
				$.ajax({
					url:this.url,
					type:'post',
					data:{
						username:$("#user").val(),
						password:$("#pass").val(),
					},
					success:function(res){
						console.log(res)
						switch(res.error){
							
							case 1:
								$("#msg").html(res.msg)
								break;
							case 0:
								console.log(res.msg)
								$("#msg").html(res.msg+'三秒后去往首页')
								
								setTimeout(()=>{
									location.href="index.html"
								},3000)
								// that.display();
								
						}
					}
				})
			}
			// display(){
			// 	console.log(this.res);
			// }
		}
		
		new Login();
	</script>
</html>
